<template>
  <div class="complaint-detail">
    <van-nav-bar class="header"
                 title="派单进度"
                 left-arrow
                 @click-left="$router.goBack()" />
    <div class="weaper">
      <div class="fengniao-content step">
        <el-steps :active="status+1"
                  finish-status="success">
          <el-step :title="item.title"
                   v-for="(item,index) in stepList"
                   :key="index"></el-step>
        </el-steps>
      </div>
      <div class="fengniao-content">
        <div class="fengniao-panel">
          <div class="fengniao-panel__title">
            <span class="title">投诉内容
              <van-tag type="danger"
                       plain
                       class="type">{{obj.suggestTypeName}}</van-tag>
            </span>
            <span class="more">{{obj.suggestTime}}</span>
          </div>
          <div class="fengniao-panel__content">
            {{obj.description}}
          </div>
        </div>
        <div class="fengniao-panel"
             v-if="status>DIC.SUBMIT">
          <div class="fengniao-panel__title">
            <span class="title">处理结果</span>
          </div>
          <div class="fengniao-panel__content">
            {{obj.resultDescription}}
          </div>
        </div>
        <div class="fengniao-panel"
             v-if="status>DIC.RATE">
          <div class="fengniao-panel__title">
            <span class="title">评级结果</span>
            <div class="more">
              <el-rate disabled
                       show-score
                       v-model="obj.appraiseResult"
                       text-color="#ff9900">
              </el-rate>
            </div>
          </div>
          <div class="fengniao-panel__content">
            {{obj.appraise}}
          </div>
        </div>
        <!-- <div class="fengniao-panel">
          <div class="fengniao-panel__title">
            报修图片
          </div>
          <div class="fengniao-panel__content">
            <div class="fengniao-upload">
              <div class="img"
                   v-for="(item,index) in imgList"
                   :key="index">
                <img :src="item.url"
                     alt="" />
              </div>
            </div>
          </div> -->
      </div>
      <div class="fengniao-content rate"
           v-if="status===DIC.RATE&&roles==website.rolesType.YZ">
        <van-cell-group class="fengniao-form form">
          <div class="form-items">
            <van-field v-model="form.appraise"
                       type="textarea"
                       placeholder="请输入用户评价"
                       rows="6"
                       autosize
                       class="form-item" />

            <el-rate class="form-item start"
                     show-score
                     v-model="form.appraiseResult"
                     text-color="#ff9900">
            </el-rate>
          </div>
          <div class="form-menu">
            <el-button type="success"
                       class="submit"
                       @click="rateObj">评价</el-button>
          </div>
        </van-cell-group>
      </div>
      <div class="fengniao-content rate"
           v-if="status===DIC.SUBMIT&&roles===website.rolesType.JL">
        <van-cell-group class="fengniao-form form">
          <div class="form-items">
            <van-field v-model="submitForm.resultDescription"
                       type="textarea"
                       placeholder="请输入办理内容"
                       rows="6"
                       autosize
                       class="form-item" />
          </div>
          <div class="form-menu">
            <el-button type="success"
                       class="submit"
                       @click="submitObj">办理</el-button>
          </div>
        </van-cell-group>
      </div>
    </div>

  </div>

</template>

<script>
import baseCommon from '@/mixins/common';
import { getObj, rateObj, submitObj, DIC } from '@/api/complaint/index';
import { asyncValidator } from '@/util/validate';
import { mapGetters } from 'vuex';

export default {
  name: 'complaintDetail',
  mixins: [baseCommon()],
  data() {
    return {
      DIC,
      id: '',
      obj: {

      },
      rules: {
        appraise: { type: 'string', required: true, message: '请输入评价内容' },
        appraiseResult: { type: 'number', required: true, message: '请选择评价等级' },
      },
      form: {
        id: '',
        appraise: '',
        appraiseResult: 0,
      },
      submitRules: {
        resultDescription: { type: 'string', required: true, message: '请输入办理内容' },
      },
      submitForm: {
        id: '',
        resultDescription: '',
      },
      imgList: [
        {
          src: '',
        },
      ],
      stepList: DIC.STEPLIST,
    };
  },
  computed: {
    ...mapGetters(['roles', 'website']),
    status() {
      return this.obj.status;
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.form.id = this.id;
    this.submitForm.id = this.id;
    this.getObj();
  },
  mounted() { },
  methods: {
    submitObj() {
      asyncValidator(this.submitRules, this.submitForm).then(() => submitObj(this.submitForm)).then(() => {
        this.getObj();
        this.$message.success({
          message: '办理成功',
          duration: 1500,
        });
      }).catch((errors) => {
        this.$message.warning({
          message: errors[0].message,
          duration: 1500,
        });
      });
    },
    rateObj() {
      asyncValidator(this.rules, this.form).then(() => rateObj(this.form)).then(() => {
        this.getObj();
        this.$message.success({
          message: '评价成功',
          duration: 1500,
        });
      }).catch((errors) => {
        this.$message.warning({
          message: errors[0].message,
          duration: 1500,
        });
      });
    },
    getObj() {
      getObj(this.id).then((res) => {
        const data = res.data;
        const obj = data.obj;
        obj.appraiseResult = Number(obj.appraiseResult);
        obj.status = Number(obj.status);
        this.obj = obj;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.complaint-detail {
  .step {
    padding: 10px 15px;
  }
  .rate {
    padding: 0 0 20px 0;
    .start {
      padding: 15px;
    }
  }
}
</style>
